<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
	<link rel="stylesheet" href="../../../iconfont/iconfont.css">
</head>
<body class="page__bg">

<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">按钮</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="page__bd">
	<div class="daui-headline daui-headline_left">
		<div class="daui-headline__text-area">
			<h2 class="daui-headline__title">按钮 Button</h2>
			<p class="daui-headline__desc">支持a,button</p>
		</div>
	</div>
	<div class="daui-cells__title">默认按钮</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_default">默认按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_plain-default">镂空按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_default daweui-btn_disabled">禁用按钮</a></div>
	</div>
	<div class="daui-cells__title">主要按钮</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_primary">主要按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_plain-primary">镂空按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_primary daweui-btn_disabled">禁用按钮</a></div>
	</div>
	<div class="daui-cells__title">成功按钮</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_success">成功按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_plain-success">镂空按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_success daweui-btn_disabled">禁用按钮</a></div>
	</div>
	<div class="daui-cells__title">警告按钮</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_warning">警告按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_plain-warning">镂空按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_warning daweui-btn_disabled">禁用按钮</a></div>
	</div>
	<div class="daui-cells__title">危险按钮</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_danger">危险按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_plain-danger">镂空按钮</a></div>
		<div class="daui-grid__item"><a href="javascript:;" class="weui-btn daui-btn_danger daweui-btn_disabled">禁用按钮</a></div>
	</div>

	<div class="daui-cells__title">带阴影按钮</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn daui-btn_primary daui-shadow_primary">主要按钮</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn daui-btn_success daui-shadow_success">成功按钮</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn daui-btn_warning daui-shadow_warning">警告按钮</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn daui-btn_danger daui-shadow_danger">危险按钮</a>
		</div>
	</div>
	
	<div class="daui-cells__title">按钮颜色</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-red shadow">红色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-orange shadow">橙色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-yellow shadow">黄色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-green shadow">绿色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-blue shadow">蓝色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-purple shadow">紫色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-mauve shadow">木槿色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-pink shadow">粉色</a>
		</div>
	</div>

	<div class="daui-cells__title">镂空按钮</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn line-red">红色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn line-orange">橙色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn line-yellow">黄色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn line-green">绿色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn line-blue">蓝色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn line-purple">紫色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn line-mauve">木槿色</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn line-pink">粉色</a>
		</div>
	</div>
	
	<div class="daui-cells__title">渐变颜色按钮</div>
	<div class="daui-grid col-3 daui-grid_cavity bg-white">
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-gradual-red">红色渐变</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-gradual-orange">橙色渐变</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-gradual-yellow">黄色渐变</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-gradual-green">绿色渐变</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-gradual-blue">蓝色渐变</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-gradual-purple">紫色渐变</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-gradual-mauve">木槿色渐变</a>
		</div>
		<div class="daui-grid__item">
			<a href="javascript:;" class="weui-btn bg-gradual-pink">粉色渐变</a>
		</div>
	</div>
	
	<div class="daui-cells__title">块状按钮</div>
	<div class="padding bg-white">
		<a href="javascript:;" class="weui-btn daui-btn_primary daui-btn_block">块状按钮</a>
	</div>
	
	<div class="daui-cells__title">按钮大小</div>
	<div class="padding bg-white">
		<div class="margin-xs">
			<a href="javascript:;" class="weui-btn daui-btn_primary daui-btn_lg">大号按钮</a>
		</div>
		<div class="margin-xs">
			<a href="javascript:;" class="weui-btn daui-btn_primary">标准按钮</a>
		</div>
		<div class="margin-xs">
			<a href="javascript:;" class="weui-btn daui-btn_primary daui-btn_sm">中号按钮</a>
		</div>
		<div class="margin-xs">
			<a href="javascript:;" class="weui-btn daui-btn_primary daui-btn_xs">小号按钮</a>
		</div>
	</div>
	
	<div class="daui-cells__title">按钮形状</div>
	<div class="padding bg-white">
		<div class="margin-xs">
			<a href="javascript:;" class="weui-btn daui-btn_primary">原始形状</a>
		</div>
		<div class="margin-xs">
			<a href="javascript:;" class="weui-btn daui-btn_primary daui-round">圆角按钮</a>
		</div>
	</div>

	<div class="daui-cells__title">特殊按钮</div>
	<div class="padding bg-white">
		<div><a href="javascript:;" class="daui-btn-specialone">特殊按钮一</a></div>
	</div>
	
	<div class="daui-cells__title">按钮布局</div>
	<div class="daui-card daui-card_full">
		<div class="padding">单个按钮</div>
		<div class="daui-buttonbar">
			<button formType="submit" class="weui-btn daui-btn_primary">推荐操作</button>
		</div>
		
		<div class="padding">按钮顺序排列</div>
		<div class="daui-buttonbar btn-group">
			<button formType="submit" class="weui-btn daui-btn_primary block">推荐操作</button>
			<button formType="submit" class="weui-btn daui-btn_default block">辅助操作</button>
		</div>
		
		<div class="padding">单个按钮居中</div>
		<div class="daui-buttonbar btn-group">
			<button formType="submit" class="weui-btn daui-btn_primary round">推荐操作</button>
		</div>
		
		<div class="padding">两个按钮并排</div>
		<div class="daui-buttonbar btn-group">
			<button formType="submit" class="weui-btn daui-btn_primary daui-round">提交</button>
			<button formType="submit" class="weui-btn daui-btn_default daui-round">辅助操作</button>
		</div>
	</div>

</div>

<div class="daui-gap daui-gap_transparent"></div>
<div class="daui-footer">
	<div class="daui-footer__links">
		<a class="daui-footer__links-item" href="../index.html">DanceWeUI首页</a>
		<a class="daui-footer__links-item" href="https://gitee.com/lianlianzan/danceui" target="_blank">去码云下载</a>
	</div>
	<div class="daui-footer__text">Copyright &copy; DanceUI</div>
</div>

</body>
</html>